<template>
  <a
    class="v-top-icon"
    @click="toTop"
    v-show="show"
  >
  </a>
</template>

<script>
import { scrollToY, throttle } from 'utils'

export default {
  name: 'toTopIcon',
  data() {
    return {
      show: false,
    }
  },
  mounted() {
    this.throttleHandler = throttle(this.scrollHandler, 50)
    window.addEventListener('scroll', this.throttleHandler)
  },
  destroyed() {
    window.removeEventListener('scroll', this.throttleHandler)
  },
  methods: {
    scrollHandler() {
      const scrollTop = document.body.scrollTop
      const pageH = window.screen.availHeight

      if (scrollTop > pageH / 2) {
        this.show = true
      } else {
        this.show = false
      }
    },
    toTop(e) {
      e.preventDefault()
      scrollToY(0, 12000)
    },
  },
}
</script>

<style lang="scss">
.v-top-icon {
  display: inline-block;
  width: 45px;
  height: 45px;
  position: fixed;
  right: 6px;
  bottom: 45px;
  z-index: 200;
  background-image: url('~assets/icons/top.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position:center;
  &:active {
    background-image: url('~assets/icons/top-active.png');
  }
}
</style>
